<!-- 活动订单列表 -->
<template>
  <view class="container">
    <view class="en">&nbsp; </view>
    <view class="search-box" hover-class="search-box-hover" hover-stop-propagation="false">
      <!-- 单号查询输入框 -->
      <view class="search-box-input">
        <image class="search-icon" src="https://img.qumoyugo.com/webimgbg/home_nearby_search.png" />
        <input class="search-input" v-model="searchInfo" type="text" placeholder="请输入订单号查询" />
        <view @click="search" class="searchBtn">搜索</view>
      </view>
    </view>
    <view class="type-box">
      <!-- 订单类型选择 -->
      <view @click="selectChange(item)" v-for="item in orderType" :key="item.orderStatus" class="type-box-warp">
        <view :class="{ selected: item.isSelected }" class="type-select-pick">{{ item.name }} </view>
        <view class="line-box">
          <view :class="{ selectedLine: item.isSelected }" class="type-select-line"> </view>
        </view>
      </view>
    </view>
    <!-- 订单列表 -->
    <view class="data-box-warp">
      <view class="data-box" v-for="item in orderList.list" :key="item.id" @click="checkVerify(item)">
        <OrderCard :order="item"></OrderCard>
      </view>
    </view>
    <!-- 空白 -->
    <view v-if="orderList.list.length <= 0" class="empty_icon">
      <image
        style="height: 404rpx; width: 600rpx"
        src="https://img.qumoyugo.com/img/default_page_no_order_icon.png"
        mode="aspectFit"
      />
    </view>
    <!-- 加载更多 -->
    <uni-load-more
      :status="reloadData.status"
      :icon-size="2"
      :content-text="reloadData.contentText"
      v-if="orderList.list.length > 5"
    />

    <view v-if="orderList.list.length <= 9" class="bottom-en">&nbsp; </view>
    <view class="btn-container">
      <!-- 底部按钮 -->
      <button @click="inputCode" class="bottom-btn-input">输入核销码</button>
      <button @click="scanCode()" class="bottom-btn-code">扫码核销</button>
    </view>
    <!-- 核销码弹窗 -->
    <view>
      <view class="popup" v-show="popShow">
        <view class="mask" catchtouchmove="preventTouchMove" catchtap="closePop" @tap="popShow = false"> </view>
        <view class="popup_main" id="popup_main">
          <view class="title-input">请输入核销码</view>
          <input v-model="verificationCode" class="code-input" type="text" />
          <button class="confim" @click="checkCode(verificationCode)">确认核销</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onPullDownRefresh, onReachBottom, onLoad } from '@dcloudio/uni-app'
import OrderCard from '@/components/order/activity/activityOrderCard.vue'
import { ref, getCurrentInstance, onMounted } from 'vue'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const eventsId = ref()
const popShow = ref(false)
onLoad(option => {
  eventsId.value = option.eventsId
  getDataList()
  verificationCode.value = ''
})
/**
 * 初始化挂载请求数据
 */
onMounted(() => {
  uni.$on('refreshWashOrder', function () {
    orderList.value.list = []
    orderList.value.query.page = 1
    getDataList()
    verificationCode.value = ''
    uni.showToast({
      title: '操作成功',
      duration: 500,
      icon: 'none'
    })
  })
})
const verificationCode = ref()
// 定义默认的初始化查询状态
const orderStatus = ref(0)
// 定义订单类型
const orderType = ref([
  {
    name: '待核销',
    isSelected: true,
    orderStatus: 0
  },
  {
    name: '已核销',
    isSelected: false,
    orderStatus: 1
  }
])
// 页面输入的查询单号
const searchInfo = ref('')
// 页面list数据
const orderList = ref({
  query: {
    page: 1,
    pageSize: 5,
    eventsId,
    orderNo: searchInfo,
    verified: orderStatus,
    isHistory: false
  },
  total: 0,
  list: []
})
/**
 * 点击跳转
 */
const checkVerify = item => {
  uni.navigateTo({
    url: '/pages/activity/verification?randomUUID=' + item.randomUUID + '&eventsId=' + eventsId.value
  })
}
/**
 * 输入核销码点击
 */
const inputCode = () => {
  popShow.value = true
}
/**
 * 搜索
 */
const search = () => {
  orderList.value.list = []
  orderList.value.query.page = 1
  getDataList()
}
/**
 * 输入核销码确认按钮
 */
const checkCode = code => {
  if (code.trim().length === 0) {
    uni.showToast({
      title: '请输入正确的核销码',
      duration: 500,
      icon: 'none'
    })
    return
  }
  return new Promise((resolve, reject) => {
    $https({
      url: '/app/activity/order/checkEventsOrder',
      type: '',
      method: 'get',
      data: { randomUUID: code, eventsId: eventsId.value }
    })
      .then(res => {
        if (res.code === 0) {
          // 转跳页面
          if (res.data) {
            popShow.value = false
            verificationCode.value = ''
            uni.navigateTo({
              url: '/pages/activity/verification?randomUUID=' + code + '&eventsId=' + eventsId.value
            })
          }
        }
        resolve()
      })
      .catch(e => reject(e))
  })
}
/**
 * 订单类型选择页面
 * @param {*} e
 */
const selectChange = e => {
  orderType.value.forEach(e => (e.isSelected = false))
  e.isSelected = true
  orderStatus.value = e.orderStatus
  orderList.value.list = []
  orderList.value.total = 0
  orderList.value.query.page = 1
  getDataList()
}
/**
 * 重新加载显示数据
 */
const reloadData = ref({
  reload: false,
  status: 'more',
  contentText: {
    contentdown: '上拉加载更多~',
    contentrefresh: '加载中',
    contentnomore: '我是有底线的~'
  }
})
/**
 * 扫描
 */
const scanCode = () => {
  uni.scanCode({
    scanType: ['qrCode'],
    success: function (res) {
      checkCode(res.result)
    }
  })
}
/**
 * 获取订单列表
 */
const getDataList = () => {
  return new Promise((resolve, reject) => {
    $https({
      url: '/app/activity/order/list',
      type: '',
      method: 'get',
      data: orderList.value.query
    })
      .then(res => {
        if (res.code === 0) {
          // 组装数据
          orderList.value.list = orderList.value.list.concat(res.data.items)
          orderList.value.total = res.data.pagination.total_record
        }
        resolve()
      })
      .catch(e => reject(e))
  })
}

// 下拉刷新，请求第一页
onPullDownRefresh(() => {
  orderList.value.list = []
  orderList.value.query.page = 1
  Promise.all([getDataList()]).then(row => {
    uni.stopPullDownRefresh()
  })
})

// 上拉加载
onReachBottom(() => {
  if (orderList.value.total > orderList.value.list.length) {
    reloadData.value.status = 'loading'
    orderList.value.query.page += 1
    getDataList()
  } else {
    reloadData.value.status = 'no-more'
  }
})
</script>

<style scoped lang="scss">
@import '@/assets/styles/home_index.scss';
.empty_icon {
  text-align: center;
  margin-top: 165rpx;
}
.btn-container {
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 140rpx;
  background: #f4f4f4;
}
.bottom-btn-input {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
  width: 444rpx;
  height: 90rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  width: 302rpx;
  height: 90rpx;
  background: #525fa2;
  border-radius: 18rpx;
  color: #ffffff;
}
.bottom-btn-code {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
  width: 444rpx;
  height: 90rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  width: 302rpx;
  height: 90rpx;
  background: #ee751e;
  border-radius: 18rpx;
  color: #ffffff;
}
.data-box-warp {
  padding-bottom: 140rpx;
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.popup_main {
  position: fixed;
  top: 631rpx;
  left: 50%;
  width: 556rpx;
  height: 360rpx;
  background: #ffffff;
  border-radius: 18rpx;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  background-color: #fff;
}
.title-input {
  margin-top: 52rpx;
  text-align: center;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #262626;
}
.code-input {
  margin-left: 67rpx;
  margin-top: 53rpx;
  width: 417rpx;
  height: 61rpx;
  background: #ffffff;
  border: 1px solid #999999;
  border-radius: 8rpx;
}
.confim {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 34rpx;
  width: 278rpx;
  height: 63rpx;
  background: #525fa2;
  font-size: 26rpx;
  border-radius: 11rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.bottom-en {
  padding-bottom: 20rpx;
}
</style>
